<template>
    <div>
      <el-button type="primary" @click="addCell">新增</el-button>
      <avue-crud ref="crud" :option="option" :data="data" @row-update="addUpdate" @row-save="rowSave"  ></avue-crud>
    </div>
</template>
<script>
export default {
    data(){
        return {

            option:{
                addBtn:false,
                addRowBtn:true,
                cellBtn:true,
                menuWidth:250,
                menu:true,
                column: [{
                    label:'姓名',
                    prop: 'name',
                    rules: [
                        {
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur'
                        }
                    ]
                },{
                    label:'性别',
                    prop: 'sex',
                    type:'select',
                    dicData:[{
                        label:'男',
                        value:0
                    },{
                        label:'女',
                        value:1
                    }],
                },{
                    label:'年龄',
                    prop: 'age',
                    slot:true,
                    formslot:true,
                    dicData:[{
                        label:'男',
                        value:0
                    },{
                        label:'女',
                        value:1
                    }],
                    rules: [
                        {
                            required: true,
                            message: '请输入年龄',
                            trigger: 'blur'
                        }
                    ],
                },{
                    label:'开关',
                    prop: 'switch',
                    type:'switch',
                },
                {
                  label:'是否通过',
                  type: 'select',
                  prop:'select',
                  cell:true,
                  dicData: [{
                      label: '通过',
                      value: '1'
                  }, {
                      label: '不通过',
                      value: '0'
                  }],
                  change:({column,value})=>{
                      console.log("colunm:",column,'value:',value)
                  }
                }]
            }
        }
    },
    created() {
        this.data = [{
            id:0,
            name:'张三',
            sex:1,
            age:18,
            $cellEdit:true
        },{
            id:1,
            name:'李四',
            age:18,
            sex:0,
            $cellEdit:true
        }]
    },
    methods:{
        rowSave(form, done) {
            this.$message.success(
                '新增数据' + JSON.stringify(form)
            )
            done()
        },
        addUpdate(form,index,done,loading){
            this.$message.success('模拟网络请求')
            setTimeout(() => {
                this.$message.success('关闭按钮等待')
                loading()
            }, 1000)
            setTimeout(() => {
                this.$message.success(
                    '编辑数据' + JSON.stringify(form) + '数据序号' + index
                )
                done()
            }, 2000)
        },
      addCell(){
          this.$refs.crud.rowCellAdd({});
      },
    }
}
</script>